
/* Ctrl+/ 快速注释 */
/* 顶部样式 */
.top {
	height: 30px;
	background-color: #f1f1f1;
}

/* 居中样式。重复利用 */
.w {
	width: 1210px;
	margin: 0 auto;
	/* border: 1px solid red; */
}

.addr {
	line-height: 30px;
}

/* 菱形外层盒子 */
i {
	/* 让子元素以当前元素为绝对定位参照物 */
	position: relative;
	top: -2px;

	/* 超出部分隐藏 */
	overflow: hidden;

	width: 16px;
	height: 4px;

	/* 转换为行内块状元素 */
	display: inline-block;

	/* border: 1px solid red; */
}

/* 菱形内层盒子 */
i s {
	/* 因为需要挪动 菱形，所以采用绝对定位方式进行操作 */
	position: absolute;
	left: 0;
	top: -8px;

	height: 12px;
	line-height: 12px;
	
	/* 字体大小 */
	font-size: 24px;

	/* border: 1px solid blue; */
}

/* 地址下拉框 */
.addr .sel {

	/* 绝对定位 */
	position: absolute;
	z-index: 100;
	
	/* 隐藏元素：相当于没写一样 */
	display: none;

	width: 100px;
	height: 300px;
	background-color: red;
}


/* 鼠标移入地址栏的状态*/
.addr:hover .sel {
	/* 显示 */
	display: block;
}




/* 菱形标签 */
.addr:hover i s {
	top: -1px;
}

.info {
	/* 行高 */
	line-height: 30px;
}

.info .reg {
	color: #c81623;
}

/* 右边导航条*/
.info ul li {
	float: left;
	/* 内边距 */
	padding: 0 10px;
	/* 右边的边框 */
	/* border-right: 1px solid #dddddd; */
}

.info .line {
	margin-top: 8px;
	padding: 0;
	width: 1px;
	height: 16px;
	background-color: #dddddd;
}

.info .phone {
	
	/* 转换为行内块状元素，便于设宽高 */
	display: inline-block;

/* 垂直方向居中 */
	vertical-align: middle;

	width: 15px;
	height: 20px;

	/* 背景图片 
		采用 精灵图（雪碧图）优点：
			1. 加快网络请求速度，对于打开网页有所帮助，因为请求图片的次数减少了
	*/
	background: url(../img/sprite.png) no-repeat;
}






/* 广告栏 */
.ad {
	height: 80px;

	/* 背景颜色 */
	background-color: #8a25c6;
}

.ad .ad-img {
	
	/* 作为子元素的参照物 */
	position: relative;


	height: 80px;

	background: url(../img/topbanner.jpg);
	
	/* 去掉背景图片重复 */
	background-repeat: no-repeat;
	
	
}

/* 关闭按钮 */
.ad .ad-img .close {
	width: 20px;
	height: 20px;
	background-color: rgba(0,0,0,0.3);

	/* 透明度 */
	/* opacity: 0.3; */



	/* 水平居中 */
	text-align: center;
	/* 垂直居中 */
	line-height: 20px;
	/* 文字白色 */
	color: white;
	/* 文字大小 */
	font-size: 20px;

/* 	float: right;
	margin-top: 10px; */

	/* 位置：绝对定位 */
	position: absolute;
	right: 5px;
	top: 10px;

	/* 指针形状：手型 */
	cursor: pointer;
}

/* 鼠标移入到关闭按钮 */
.ad .ad-img .close:hover {
	background-color: rgba(0,0,0,1);
}








/* 搜索栏 */
.search {
	/*顶部内边距*/
	padding-top: 20px;

	/* 因为可以由内部元素撑开，所以不需要设高度 */
	/* height: 50px; */

	border: 1px solid red;
}

.search .logo {
	width: 160px;
	height: 60px;
	background: url(../img/logo.png);

	/* 左浮动 */
	float: left;
}

.search .dong {
	/* 往上挪 */
	margin-top: -20px;
}

.search .word {
	float: left;

	/* 左边外间隙 */
	margin-left: 20px;
	/* 左边内间隙 */
	padding-left: 10px;

	
	width: 450px;
	height: 30px;
	border: 3px solid #b61d1d
}


/*搜索按钮*/
.btn-search {
	width: 80px;
	height: 35px;
	background-color: #b61d1d;

	float: left;

	/* 文字颜色 */
	color: #FFFFFF;
	
	/* 水平居中 */
	text-align: center;

	/* 垂直居中：行高与元素高度一致的时候 */
	line-height: 35px;
	
	/* 鼠标形状：手型 */
	cursor: pointer;
}


.car {
	/*参照物*/
	position: relative;

	width: 140px;
	height: 35px;
	border: 1px solid #dfdfdf;

	float: right;
	/* 右边的外边距 */
	margin-right: 70px;
	
	/* 左边的内边距 */
	padding-left: 45px;

	/* 文字：垂直居中 */
	line-height: 35px;

	color: #666666;
}

/* 小图标 */
.car span {
	width: 19px;
	height: 16px;
	
	/* 行内元素不能设宽高：需要转换为块状元素 block
								行内块状元素 inline-block */
	display: inline-block;

	/*背景图片*/
	background: url(../img/sprite.png) no-repeat;

	/* 调整背景图片位置:  x, y 值 */
	background-position: 0 -90px;

	/* 绝对定位*/
	position: absolute;
	top: 10px;
	left: 15px;
}

/* 数量： 行内元素 */
.car i {
	/* 转换块状元素 */
	display: block;

	width: 15px;
	height: 15px;
	background: #c81623;

	/* 绝对定位 */
	position: absolute;
	right: 40px;
	top: -5px;

	/* 文字颜色 */
	color: #FFF;

	text-align: center;
	line-height: 15px;	

	font-size: 10px;

	/* 圆角: 左上角、右上角、右下角、左下角 */
	border-radius: 10px 10px 10px 0;
}


/* 商品分类 */
.cat {
	

	/* 底部红线边框 */
	border-bottom: 2px solid #b1191a;
}

.cat ul {
	/* 距离左边的内边距 */
	padding-left: 210px;
}

.cat ul li {
	float: left;

	/* 行高 */
	line-height: 45px;

	/* 希望由内容撑开元素，所以采用内边距来设置 */
	padding: 0 20px;	

	/* 绝对定位参照物 */
	position: relative;
}

/* 新 图标 */
.cat ul li .new {
	/* span 转换为块状元素 */
	display: block;

	width: 20px;
	height: 20px;
	/* 背景图片 */
	background: url(../img/new.jpg) no-repeat;

    /* 设置到右上角 */
	position: absolute;
	right: 0px;
	top: 0px;
}


/* 全部商品分类 */
.main {
	position: relative;

	color: white;

	height: 603px;

	/* 背景图片: 不重复 */
	background: url("../img/banner.jpg") no-repeat center center;

	/* 背景图片居中: 水平方向 垂直方向 */
	/* background-position: center center; */
}

.main a {
	color: white;
}

.main dl {
	/* 背景颜色 */
	background-color: #c81623;

	width: 210px;

	position: absolute;
	top: -40px;
}

.main dl dt {
	height: 40px;

	background-color: #b1191a;

	color: #ffffff;

	/* 垂直方向居中 */
	line-height: 40px;
	
	/* 左边的内边距 */
	padding-left: 10px;
}


.main dl dd {
	/* 左边的内边距 */
	padding-left: 10px;
	
	line-height: 30px;
}

.main dl dd span {
	float: right;
	margin-right: 20px;
}

.main dl dd .list {
	width: 200px;
	height: 100px;
	background: red;

	position: absolute;
	left: 210px;
	top: 40px;

	/* 隐藏元素：默认是看不见的 */
	display: none;
}

/* 鼠标以上到dd上的状态 */
.main dl dd:hover .list {
	/* 显示元素: 转换块状元素 */
	display: block;
}